<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta charset="utf-8"/>
    <script src="js/jquery-1.12.1.min.js" type="text/javascript"></script>
    <script src="js/svVideo.js" type="text/javascript"></script>
    <style>
        .div-inline {
            float: left;
        }
    </style>
</head>
<body>

<div>
    <div class="div-inline">
        <canvas id="cvs1" class="cvs" width="450" height="320"></canvas>
    </div>
    <div class="div-inline">
        <table style="border-collapse:separate; border-spacing:0px 12px;">
            <tr>
                <td>
                    选择设备:
                    <select id="ip" class="sel">
                        <option value="192.168.8.51">刻录机</option>
                        <option value="192.168.8.52" selected>摄像头</option>
                    </select>
                    服务器地址
                </td>

                <td>
                    <input type="text" id="wsIp" value="127.0.0.1"/>
                    <input type="button" class="btn" value="开始连接" onclick="clickStartConnection(0);"/>
                    <a href="online" target="_blank">在线连接</a>
                </td>
            </tr>

            <tr>
                <td>
                    <input type="button" class="btn" value="抓图" onclick="clickCapturePic();"/>
                    <input type="button" class="btn" value="开始录像" onclick="clickStartRecord(0);"/>
                    <input type="button" class="btn" value="停止录像" onclick="clickStartRecord(1);"/>
                </td>
                <td>

                    <input type="button" class="btn" value="开始预览" onclick="clickStartRealPlay(1);"/>
                    <input type="button" class="btn" value="停止预览" onclick="clickStartRealPlay(2);"/>
                    <input type="button" class="btn" value="断开连接" onclick="clickStartConnection(1);"/></td>
                </td>

            </tr>

            <tr>
                <td>
                    <input type="button" class="btn" value="左上" onmousedown="mousePTZControl(25,0);"
                           onmouseup="mousePTZControl(25,1);"/>
                    <input type="button" class="btn" value="上" onmousedown="mousePTZControl(21,0);"
                           onmouseup="mousePTZControl(21,1);"/>
                    <input type="button" class="btn" value="右上" onmousedown="mousePTZControl(22,0);"
                           onmouseup="mousePTZControl(22,1);"/>
                    <span id="msg"></span>
                </td>
                <td>
                    云台速度
                    <select id="ptzspeed" class="sel">
                        <option value="0" selected>0</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                    </select>
                    预置点号
                    <input id="preset" style="width:100px;height:20px" type="text" class="txt" value="1"/>
                </td>
                <td>

                </td>
                <span class="playBackItem"> </span>
            </tr>
            <tr>
                <td>
                    <input type="button" class="btn" value="左" onmousedown="mousePTZControl(23,0);"
                           onmouseup="mousePTZControl(23,1);"/>
                    <input type="button" class="btn" value="自动" onclick="mousePTZControl(29,0);"/>
                    <input type="button" class="btn" value="右" onmousedown="mousePTZControl(24,0);"
                           onmouseup="mousePTZControl(24,1);"/>
                </td>

                <td class="tt"><input type="button" class="btn2" value="变倍+" onmousedown="mousePTZControl(13,0)"
                                      onmouseup="mousePTZControl(13,1)">
                    <input type="button" class="btn2" value="变倍-" onmousedown="mousePTZControl(14,1)"
                           onmouseup="mousePTZControl(14,0)">
                </td>

                <td></td>
                <td>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" class="btn" value="左下" onmousedown="mousePTZControl(27,0);"
                           onmouseup="mousePTZControl(27,1);"/>
                    <input type="button" class="btn" value="下" onmousedown="mousePTZControl(22,0);"
                           onmouseup="mousePTZControl(22,1);"/>
                    <input type="button" class="btn" value="右下" onmousedown="mousePTZControl(28,0);"
                           onmouseup="mousePTZControl(28,1);"/>
                </td>
                <td class="tt"><input type="button" class="btn2" value="变焦+" onmousedown="mousePTZControl(11,0)"
                                      onmouseup="mousePTZControl(11,1)">
                    <input type="button" class="btn2" value="变焦-" onmousedown="mousePTZControl(12,0)"
                           onmouseup="mousePTZControl(12,1)">
                </td>

                <td></td>
            </tr>

            <tr>
                <td>
                    <input type="button" class="btn" value="设置"/>
                    <input type="button" class="btn" value="调用"/>
                    <input type="button" class="btn" value="自动停止" onclick="mousePTZControl(29,1);"/>
                </td>
                <td class="tt"><input type="button" class="btn2" value="光圈+" onmousedown="mousePTZControl(15,0)"
                                      onmouseup="mousePTZControl(15,1)">
                    <input type="button" class="btn2" value="光圈-" onmousedown="mousePTZControl(16,0)"
                           onmouseup="mousePTZControl(16,1)">
                </td>
                <td>
                </td>
            </tr>
            <input id="video" type="hidden"/>
        </table>

    </div>
</div>
<style type="text/css">
    #handMsg {
        overflow: auto;
        background: #eee;
        bottom: 0px;
        position: fixed;
        height: 350px;
        line-height: 30px;
        width: 100%;
        _position: absolute; /*兼容IE6*/
    }
</style>

<div id="handMsg" style="border: #1E9FFF 1px">

</div>
<script type="text/javascript">
    //获取Url参数
    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return decodeURIComponent(r[2]);
        } else {
            return null;
        }
    }
    function CheckIsNullOrEmpty(value) {
        //正则表达式用于判斷字符串是否全部由空格或换行符组成
        var reg = /^\s*$/
        //返回值为true表示不是空字符串
        return (value != null && value != undefined && !reg.test(value))
    }


    function getTime() {
        var date = new Date();
        //年
        var year = date.getFullYear();
        //月
        var month = date.getMonth() + 1;
        //日
        var day = date.getDate();
        //时
        var hh = date.getHours();
        //分
        var mm = date.getMinutes();
        //秒
        var ss = date.getSeconds();
        return year + "年" + month + "月" + day + "日" + hh + ":" + mm + ":" + ss;
    }


    function playBackStop(playBackFileName) {
        video1.send(6, null, null, null, null, null, playBackFileName);
    }

    function playBackSart(playBackFileName) {
        video1.send(6, null, null, null, null, null, playBackFileName);
    }

    //获取Url中的视频名称
    var videoName = getQueryString('vid');

    var video1 = $("#cvs1").svVideo({
        videoId: videoName
    })[0];

    function clickCapturePic() {
        video1.send(4, null, null, null, null, null, null);
    }

    function downLoadVideo(videoPath) {
        console.log("videoPath" + videoPath)
        location.href = "/hik/downloadVideo?video=" + videoPath;
    }

    function downLoadImg(imgPath) {
        console.log("imgPath" + imgPath)
        location.href = "/hik/downloadImg?img=" + imgPath;
    }

    function clickStartRecord(recordVideo) {
        if (0 === recordVideo) {
            video1.send(3, null, null, null, recordVideo, null, null);
        } else {
            video1.send(3, null, null, null, recordVideo, null, null);
        }
    }

    //打开视频
    function clickStartRealPlay(isPreView) {
        if (1 === isPreView) {  //开始预览
            video1.send(2, null, null, isPreView, null, null, null);
        } else {
            video1.close();
        }


    }

    function clickStartConnection(isConnection) {
        var ip = $("#ip").val();
        console.log("ip" + ip)
        var wsIp = $("#wsIp").val();
        if (0 === isConnection) {
            var url = "ws://" + wsIp + ":705/hik/ws/" + ip;
            video1.open(url);
        } else {
            video1.close();
        }
    }

    //重设视频大小
    function videoResize() {
        var w = $(window).width() * 0.3;
        var h = $(window).height() * 0.5;
        video1.resize(w, h);
    }

    function SearchPlayBack(searchType) {
        video1.send(5, null, null, null, null, searchType, null);
    }


    //窗口缩放事件
    $(window).resize(function () {
        videoResize();
    });

    function mousePTZControl(cmdCode, isStop) {
        console.log(cmdCode + "======" + isStop);
        video1.send(1, cmdCode, isStop, null, null);
    }

</script>
</body>
</html>
